<template>
  <div>
    <ul>
      <li v-for="(menu,index) in menus" :key="menu.id">
        <a href="'http://localhost:8080/menu/'+menu.id">{{ menu.name }}</a>
      </li>

    </ul>

    <input type="text" v-model="content">
    <button @click="add">添加</button>
  </div>
</template>

<script>

import  Pubsub from 'pubsub-js';
export default {
  name: "Menu",
  //生命接收属性：这个属性就会成为组件对象的属性
  // props:['menus','addMenu'],
  props:['menus'],
  data(){
    return{
      content:""
    }
  },
  methods:{
    add(){
      const content = this.content.trim();
      if(!content){
        alert("菜单名称不能为空");
        return;
      }

      let menu = {id:5,name:content};
      // this.addMenu(menu);
      // this.$emit("addMenu",menu)
      PubSub.publish('add',menu)
    }
  }
}
</script>

<style scoped>

ul li {
  float: left;
  padding-left: 5px;
}
</style>
